<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <router-link
        :to="item.path"
        tag="button"
        v-for="(item, index) in data"
        :key="index"
        :class='$route.meta.index===index?"active":""'
      >
        {{ item.meta.title }}
      </router-link>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: '',
  data() {
    return {
      msg: '测试',
      data:[],
      index:0
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
       let data = this.$router.options.routes.filter((item, index) => {
      return item.children;
    });
    // console.log(data);
    let data1 = data.map((item, index) => {
      return item.children;
    });
    // console.log(data1);
    let data2 = data1[0].filter((item, index) => {
      return item.meta.secondNav;
    });
    console.log(data2);

    this.data = data2;
    console.log(this.data);
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      
  },
  // Vue方法定义
  methods: {
      
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */

 button {
  width: 97px;
  height: 30px;
  line-height: 20px;
  border-radius: 30px;
  background: white;
  /* color: rgba(254, 0, 86, 100); */
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  font-family: Arial;
  /* border: 1px solid rgba(254, 0, 86, 100); */
}
button:nth-child(1) {
  margin-left: 101px;
  /* color: rgba(254, 0, 86, 100);
  border: 1px solid rgba(254, 0, 86, 100); */

  border: 1px solid rgba(206, 206, 206, 100);
  color: rgba(206, 206, 206, 100);
}
 button:nth-child(2) {
  margin-left: 19px;
  border: 1px solid rgba(206, 206, 206, 100);
  color: rgba(206, 206, 206, 100);
}
 button.active{
  color: rgba(254, 0, 86, 100);
  border: 1px solid rgba(254, 0, 86, 100);
}
</style>